<template>
    <div ref="scroll">
      <div>
        <el-row :gutter="20" style="margin:10px 0">
          <el-col :span="8"><div class="grid-content bg-purple" v-show="type !== 'common'">
            <span>跟进方式：</span>
            <el-select v-model="modeId" placeholder="请选择" size="medium" ref="modeSelect" clearable>
              <el-option
                v-for="item in modeOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>
          </div></el-col>
          <el-col :span="8"><div class="grid-content bg-purple" v-show="type !== 'common'">
            <span>联系人：</span>
            <el-select v-model="contacts" placeholder="请选择" size="medium" ref="contaSelect">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.linker"
                :value="item.id">
              </el-option>
            </el-select>
          </div></el-col>
        </el-row>

        <el-input
          type="textarea"
          placeholder="今天和客户..."
          :rows="5"
          maxlength="200"
          show-word-limit
          :disabled="type === 'common'"
          v-model="followMessage"></el-input>

        <div class="button-box" v-if="type !== 'common'">
          <el-button type="primary" @click="submit" :loading="loading" plain size="small"> 添加 </el-button>
        </div>

        <div>
          <div style="margin-top:50px;margin-bottom: 20px">
            <el-select v-model="timeSort" placeholder="请选择排序方式" ref="sortSelect" size="medium" style="margin: 10px">
              <el-option
                v-for="item in tiemOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-select v-model="flowUpType" placeholder="请选择跟进类型" ref="flowSelect" size="medium" style="margin: 10px">
              <el-option
                v-for="item in typeOptions"
                :key="item.id"
                :label="item.label"
                :value="item.id">
              </el-option>
            </el-select>

            <el-select v-model="contactId" placeholder="请选择联系人" ref="concactSelect" size="medium" style="margin: 10px">
              <el-option
                v-for="item in linkerOptions"
                :key="item.id"
                :label="item.linker"
                :value="item.id">
              </el-option>
            </el-select>

            <el-input v-model="flowUpContent" placeholder="请输入内容" prefix-icon="el-icon-search" style="width:220px;margin: 5px" size="medium" class="input_right" @keyup.enter.native="searchFlowUp"></el-input>

            <div style="margin-top:20px">
              <avue-timeline pending time :time-width="100" class="timeline">
                <avue-timeline-item icon="el-icon-tickets" v-for="(item,index) in flowUpList" :key="index" :icon="item.icon">
                  <div slot="time">{{item.logTime}}</div>
                  <div slot="content" v-if="item.operType == 3" style="width: 100%">
                    <p style="font-weight: 600; color: black">{{item.emailType}}</p>
                    <p class="mail_content">{{item.operTo}}</p>
                    <p class="mail_content" >邮件主题：{{item.operTopic}}</p>
                    <p>{{item.operContent}}</p>
                  </div>
                  <div slot="content" v-else style="width: 100%">
                    <p style="font-weight: 600; color: black">{{item.operTopic}}</p>
                    <p class="mail_content">{{item.operContent}}</p>
                  </div>
                </avue-timeline-item>
              </avue-timeline>

              <el-pagination
                background
                style="margin-top:10px;text-align: center"
                layout="prev, pager, next"
                @current-change="floeUpChangePage"
                :current-page="nowPage"
                :total="flowUpTotal">
              </el-pagination>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import {flowUp,getFlowUp} from '@/api/customer'
    export default {
        name: "detailFollow",
        props:{
          options:{
              type:Array,
              default() {
                  return []
              }
          },
            id:{
                type:null,
                default() {
                    return 0
                }
            },
            type:{
                type:String,
                default() {
                    return 'my'
                }
            }
        },
        data() {
            return {
                modeId:'',
                loading:false,
                modeOptions:[
                    {
                    id:'5',
                    label:'快速记录'
                    },
                    {
                        id:'6',
                        label:'电话'
                    },
                    {
                        id:'7',
                        label:'会面'
                    },
                    {
                        id:'8',
                        label:'社交'
                    }],
                contacts:'',
                timeDefault: '',
                followMessage:'',
                timeSort:'DESC',
                tiemOptions:[
                    {
                        value: 'ASC',
                        label: '时间正序'
                    },
                    {
                        value: 'DESC',
                        label: '时间倒序'
                    },
                ],
                flowUpType:'0',
                typeOptions:[
                    {
                        id:'0',
                        label:'全部'
                    },
                    {
                        id:'3',
                        label:'邮件'
                    },
                    {
                        id:'5',
                        label:'快速记录'
                    },
                    {
                        id:'6',
                        label:'电话'
                    },
                    {
                        id:'7',
                        label:'会面'
                    },
                    {
                        id:'8',
                        label:'社交'
                    }
                ],
                contactId:0,
                nowPage: 1,
                flowUpTotal:0,
                flowUpContent:'',
                flowUpList:[],
                linkerOptions:[{
                    id:0,
                    linker:'全部'
                }]
            }
        },
        watch:{
            timeSort() {
                this.nowPage = 1
                this.init()
            },
            flowUpType() {
                this.nowPage = 1
                this.init()
            },
            contactId() {
                this.nowPage = 1
                this.init()
            },
            options(value) {
                this.linkerOptions = this.linkerOptions.concat(value)
            }
        },
        mounted() {
            var tab = document.getElementsByClassName('tab')[0]
            tab.addEventListener("scroll",()=> {
                this.$refs.sortSelect.handleClose();
                this.$refs.flowSelect.handleClose()
                this.$refs.concactSelect.handleClose()
                this.$refs.modeSelect.handleClose()
                this.$refs.contaSelect.handleClose()
            });
        },
        methods:{
            init() {
              // 请求跟进
                getFlowUp(this.id,this.nowPage,10, this.flowUpContent, this.timeSort,this.flowUpType, this.contactId).then(res => {
                    if (res.data.success) {
                        this.flowUpList = res.data.data.records
                        this.flowUpTotal = res.data.data.total
                    }
                })
            },
            submit() {
                if(this.followMessage != '') {
                    this.loading = true
                    flowUp(this.followMessage, this.id, this.modeId, this.contacts).then(res => {
                        if (res.data.success) {
                            this.$message({
                                type: 'success',
                                message: res.data.msg
                            })
                            this.loading = false
                            this.followMessage = ''
                            this.searchFlowUp();
                        }
                    })
                } else {
                    this.$message({
                        message:'请输入跟进内容',
                        type:'warning'
                    })
                }
            },
            searchFlowUp() {
                this.nowPage = 1
                this.init()
            },
            floeUpChangePage(page) {
              // 跟进翻页
                this.nowPage = page
                this.init()
            }
        }
    }
</script>

<style scoped>
  .button-box{
    margin-top: 10px;
    text-align: right;
  }
  .mail_content{
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
  }
</style>
